import React, { useEffect } from 'react';
import { Drawer, Form, Input, Select, Button, Space } from 'antd';
import { Menu } from '@/pages/Settings/MenuManagement/types';
import IconSelect from './IconSelect';
import PermissionTreeSelect from './PermissionTreeSelect';

const { Option } = Select;

interface MenuDrawerProps {
  visible: boolean;
  editingMenu: Menu | null;
  form: any;
  onClose: () => void;
  onFinish: (values: any) => void;
  parentMenuOptions: { label: string; value: number }[];
}

const MenuDrawer: React.FC<MenuDrawerProps> = ({ visible, editingMenu, form, onClose, onFinish, parentMenuOptions }) => {
  useEffect(() => {
    if (visible && editingMenu) {
      form.setFieldsValue(editingMenu);
    } else if (visible) {
      form.resetFields();
    }
  }, [visible, editingMenu, form]);

  return (
    <Drawer
      title={editingMenu ? '编辑菜单' : '添加菜单'}
      open={visible}
      onClose={onClose}
      width={600}
      destroyOnClose
      maskClosable
      forceRender
    >
      <Form
        form={form}
        layout="vertical"
        onFinish={onFinish}
      >
        <Form.Item
          name="name"
          label="菜单名称"
          rules={[{ required: true, message: '请输入菜单名称' }]}
        >
          <Input placeholder="请输入菜单名称" />
        </Form.Item>
        <Form.Item
          name="path"
          label="路径"
          rules={[{ required: true, message: '请输入路径' }]}
        >
          <Input placeholder="请输入路径，如 /system/menus" />
        </Form.Item>
        <Form.Item
          name="icon"
          label="图标"
        >
          <IconSelect />
        </Form.Item>
        <Form.Item
          name="component"
          label="组件路径"
        >
          <Input placeholder="如 pages/Settings/MenuManagement/index" />
        </Form.Item>
        <Form.Item
          name="parentId"
          label="上级菜单"
        >
          <Select
            placeholder="请选择上级菜单"
            allowClear
            options={parentMenuOptions}
          />
        </Form.Item>
        <Form.Item
          name="orderNum"
          label="排序"
        >
          <Input type="number" placeholder="请输入排序号" />
        </Form.Item>
        <Form.Item
          name="permission"
          label="权限标识"
        >
          <PermissionTreeSelect />
        </Form.Item>
        <Form.Item>
          <Space>
            <Button type="primary" htmlType="submit">
              {editingMenu ? '更新' : '创建'}
            </Button>
            <Button onClick={onClose}>
              取消
            </Button>
          </Space>
        </Form.Item>
      </Form>
    </Drawer>
  );
};

export default MenuDrawer; 